<template>
    <div class="big-box" v-for="(item, index) in list" :key="index">
        <div class="box">
            <div class="left">
                <div class="left-img">
                    <img :src="item.doctorimage" alt="">
                </div>
            </div>
            <div class="right">
                <div class="rigth-name">
                    <div style="font-size: 0.35rem"><b>{{ item.doctorname }}</b></div>
                    <div style="width: 2.5rem;margin-left: 0.2rem;font-size: 0.25rem;"><b>{{ item.doctorstate }}</b>
                    </div>
                    <div style="float: right;"><van-button type="primary" round color="#00be8c"
                            size="small" @click="detail">去挂号</van-button></div>
                </div>
                <div class="right-address">
                    {{ item.doctoradministre }} | 北京巴啦啦中方医院
                </div>
                <div class="right-title">
                    <div class="van-multi-ellipsis--l2">
                        {{ item.doctordescword }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
const router=useRouter()
const props=defineProps(['list'])

const detail=()=>{
    router.push('/xiao/xiangys')
}
 
</script>
<style scoped>
.big-box {
    width: 100%;
    height: 2.3rem;
    background: #fff;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0 0 0;
}

.box {
    width: 95%;
    height: 100%;
}

.left {
    float: left;
    width: 1.1rem;
    height: 80%;

    .left-img {
        width: 100%;
        height: 60%;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
}

.right {
    float: left;
    width: calc(100% - 1.5rem);
    height: 100%;
    margin-left: 0.2rem;
}

.rigth-name {
    width: 100%;
    height: 35%;

    div {
        float: left;
        line-height: 0.6rem;
    }
}

.right-address {
    width: 100%;
    height: 20%;
    color: #666666;
}

.right-title {
    color: #666666;   }
</style>